:host {
  .x-row {
    margin-top: 1rem;
    > .x-col {
      > .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 5rem;
        border-radius: 0.125rem;
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
        cursor: pointer;
        > .x-icon {
          font-size: 1.5rem;
          transition: transform 0.3s ease-in-out;
        }
        > span {
          font-size: 0.75rem;
          cursor: inherit;
          white-space: nowrap;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          text-align: center;
          padding: 0.5rem 0.625rem;
        }
        &:hover {
          background-color: var(--x-primary);
          color: white;
          > .x-icon {
            color: inherit;
            transform: scale(1.4);
          }
        }
      }
    }
  }
}
